<template>
  <div class="app-container" v-loading="loading">
    <el-row :gutter="20" >
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>学校信息</span>
          </div>
          <div>
            <div class="text-center">
              <el-upload
                ref="upload"
                class="avatar-uploader"
                list-type="picture-card"
                :action="url"
                :show-file-list="false"
                :on-success="uploadSuccess"
                :limit="1"
                :file-list="fileList"
                :headers="headers"
                :before-upload="checkUpload">
                <img v-if="user.headPic" :src="base_url+user.headPic" class="avatar" width="100px" height="100px">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <svg-icon icon-class="email" />学校名称
                <div class="pull-right">{{ user.name }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="user" />学校简称
                <div class="pull-right">{{ user.forShort }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="user" />地址
                <div class="pull-right">{{ user.address }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="user" />学校简介
                <div class="pull-right">{{ user.introduce }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="phone" />招生电话
                <div class="pull-right">{{ user.phone }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="phone" />招生微信
                <div class="pull-right">{{ user.contactWechat }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="phone" />招生QQ
                <div class="pull-right">{{ user.contactQq }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="date" />可上传数
                <div class="pull-right">{{ user.uploadNum }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="date" />已上传数
                <div class="pull-right">{{ user.onloadNum }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>基本资料</span>
          </div>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="userinfo">
              <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="学校地址" prop="address">
                  <el-input v-model="form.address" />
                </el-form-item>
                <el-form-item label="简介" prop="introduce">
                  <el-input type="textarea"  col="3" v-model="form.introduce" @input="descInput" max-length="500
i"
                  />
                  <span class="numberV" style="position: absolute; right: 10px;bottom: 0;">{{txtVal}}/500</span>
                </el-form-item>
                <el-form-item label="招生电话" prop="phone">
                  <el-input v-model="form.phone" maxlength="255" />
                </el-form-item>
                <el-form-item label="招生微信" prop="phone">
                  <el-input v-model="form.contactWechat" maxlength="255" />
                </el-form-item>
                <el-form-item label="招生QQ" prop="phone">
                  <el-input v-model="form.contactQq" maxlength="255" />
                </el-form-item>
                <el-form-item label="简称" prop="forShort">
                  <el-input v-model="form.forShort"  />
                </el-form-item>
                <el-form-item label="温馨提示" >
                  <div style="color:red">招生电话、招生微信、招生QQ等若有多个，请用英文逗号,连接</div>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="mini" @click="submit">保存</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {getToken} from "@/utils/auth";
  import { getSchool,updateSchool } from "@/api/forum/school";

  export default {
    name: "Profile",
    data() {
      return {
        user: {},
        activeTab: "userinfo",
        open:false,
        fileList:[],
        base_url:process.env.VUE_APP_BASE_API,
        url:process.env.VUE_APP_BASE_API + "/common/upload",
        // 设置上传的请求头部
        headers: {Authorization: "Bearer " + getToken()},
        rules:{
          address:[
            {required: true, message: "请输入学校地址", trigger: "blur"}
          ],
          introduce: [
            {required: true, message: "请输入学校简介", trigger: "blur"}
          ],
          phone:[
            {required :true,message:"请输入招生电话",trigger:'blur'}
          ],

          forShort:[
            {required :true,message:"请输入学校简称",trigger:'blur'}
          ],
          // contactWechat:[
          //   {required :true,message:"请输入招生微信",trigger:'blur'}
          // ],
          // contactQq:[
          //   {required :true,message:"请输入招生QQ",trigger:'blur'}
          // ]
        },
        form:{
          address:undefined,
          introduce:undefined,
          phone:undefined,
          contactWechat:undefined,
          contactQq:undefined,
          forShort:undefined
        },
        loading:false,
        txtVal:0
      };
    },
    created() {
      this.getUser();
    },
    methods: {
      descInput(){
        this.txtVal = this.form.introduce.length;
      },
      submit(){
        var that = this;
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.loading = true;
            updateSchool(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
              }
              that.getUser()
            });
          }
        });
      },
      getUser() {
        var that = this;
        this.loading = true;
        getSchool(-1).then(response => {
          this.user = response.data;
          this.form.deptId = response.data.deptId;
          this.form.phone = response.data.phone;
          this.form.address = response.data.address;
          this.form.introduce = response.data.introduce;
          this.form.contactWechat = response.data.contactWechat;
          this.form.contactQq = response.data.contactQq;
          this.form.forShort = response.data.forShort;
          if(this.form.introduce){
            this.txtVal = this.form.introduce.length;
          }

          this.$refs.upload.clearFiles();
          setTimeout(function(){
            that.loading = false;
          },500)

        });
      },
      /** 上传成功后的回调 */
      uploadSuccess(response, file, fileList) {
        console.log("11112" + response.fileName);
        this.$refs.upload.clearFiles();
        this.user.headPic = response.fileName;
        updateSchool({deptId:this.form.deptId,headPic:this.user.headPic}).then(res=>{
          if(res.code === 200){
            this.msgSuccess("修改成功");
          }
        })
      },
      /** 上传之前的校验 */
      checkUpload(file) {
        console.log("文件类型", file)
        const imgType = file.type;
        //图片不大于2M
        const isLtSize = file.size / 1024 / 1024 < 2
        if (['image/png', 'image/jpeg', 'image/jpg', 'image/gif'].indexOf(imgType) === -1) {
          this.$message.error('上传图片只能是 JPG、PNG、GIF格式!')
          return false;
        }
        if (!isLtSize) {
          this.$message.error(`上传图片大小不能超过2MB!`)
          return false;
        }
      },
    }
  };
</script>
